<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<!-- <div class="box">
	<h1>{{status}}</h1>
	<h2>{{name}}</h2>
	<span>{{age+"777"}}</span>
	<div>{{num>60?"及格":"不及格"}}</div>
</div> -->

<!-- <div class="appp"> -->
<!-- <h1>{{name+"美杜莎"}}</h1> -->
<!-- {{age+8}} -->
<!-- <h2>{{status}}</h2> -->
<!-- <span>{{num>60?"及格":"优秀"}}</span> -->
<!-- <div v-text="name">66666</div> -->
<!-- <div v-html="button">88888</div> -->
<!-- <span v-if="false">111</span> -->
<!-- <span v-if="true">222</span> -->
<!-- <span v-show="false">222</span> -->
<!-- <span v-show="true">111</span> -->
<!-- <div v-if="num>90">优秀</div> -->
<!-- <div v-else-if="num>80">良好</div> -->
<!-- <div v-else-if="num>70">中等</div> -->
<!-- <div v-else-if="num>60">及格</div> -->
<!-- <div v-else>不及格</div> -->
<!-- <div :class="cl">888</div> -->
<!-- <input type="text" v-model="lan">{{lan}} -->
<!-- <input type="text" v-model="lan">{{lan+1}} -->
<!-- <input type="text" v-model="lan">{{lan*1+1}} -->
<!-- <input type="text" v-model.number="red">{{red+1}} -->
<!-- <input type="text" v-model.lazy="lan">{{lan}} -->
<!-- <input type="text" v-model.trim="lan">{{lan}} -->
<!-- <input type="text" v-model="lan">{{lan}} -->

<!-- </div> -->

<div class="body">
	<input type="text" v-model.number="num1">
	<select v-model="mid">
		<option>+</option>
		<option>-</option>
		<option>*</option>
		<option>/</option>
	</select>
	<input type="text" v-model.number="num2">
	<button @click="comput(mid)">=</button>{{rel}}
	<div>
		姓名<input type="text" v-model="name"><br>
		年龄<input type="text" v-model="age"><br>
		<button @click="add()">添加</button>
	</div>
	<div>
		<table>
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in arr" :key="item.id" :class="{blue:index%2==0,red:index%2!=0}">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.age}}</td>
					<td><button @click="del(item.id)">删除</button></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<script>
	new Vue({
		el: ".box",
		data: {
			name: "张三",
			age: 666,
			status: "猪猪辉啥也不是",
			num: 90
		}
	})

	new Vue({
		el: ".appp",
		data: {
			name: "萧炎",
			age: 6,
			status: "猪猪辉是猪",
			num: 50,
			button: "<button>按钮</button>",
			cl: "app",
			lan: "     9999",
			red: ""
		}
	})

	//自定义隔行换色
	// Vue.directive('color', function (ele, obj) {
	// 	// console.log(obj);
	// 	if (obj.value % 2 == 0) {
	// 		ele.style.backgroundColor = 'blue';
	// 	} else {
	// 		ele.style.backgroundColor = 'red';
	// 	}
	// })

	new Vue({
		el: ".body",
		data: {
			num1: "",
			num2: "",
			mid: "",
			rel: "",
			autoID: 4,
			arr: [{
				id: 1,
				name: "张三",
				age: 18
			}, {
				id: 2,
				name: "李四",
				age: 20
			}, {
				id: 3,
				name: "王五",
				age: 34
			}],
			name: "",
			age: ""
		},
		methods: {
			comput(mid) {
				if (mid == "+") {
					this.rel = this.num1 + this.num2
				} else if (mid == "-") {
					this.rel = this.num1 - this.num2
				} else if (mid == "*") {
					this.rel = this.num1 * this.num2
				} else if (mid == "/") {
					this.rel = this.num1 / this.num2
				}
			},
			add() {
				this.arr.push({ id: this.autoID, name: this.name, age: this.age })
				this.autoID++
			},
			del(id) {
				var index = this.arr.findIndex(item => item.id == id)
				this.arr.splice(index, 1)
			}
		}
	})
</script>
<style>
	/* 绑定动态类名实现隔行换色 */
	.blue {
		background-color: blue;
	}

	.red {
		background-color: red;
	}
</style>